<template>
	<view class='pay'>
		<view class="top">
			<up-cell-group>
				<up-cell :value="money" label="代驾费用计算四舍五入取小数点后两位" title="订单总金额"></up-cell>
			</up-cell-group>
		</view>
		<view class="img-box">
			<view class="tip">请客人用微信扫一扫进行支付，客人用微信支付时，请勿点击已收现金，造成收款失败的自负责任</view>
			<view class="img">
				<u--image :showLoading="true" :src="`data:image/webp;base64,${qrCode}`" width="200px" height="200px"></u--image>  
			</view>
			<up-button style="width: 80%;margin: 50px auto;" type="info" text="已收现金" @click="handlePay"></up-button>
		</view>
	</view>
</template>

<script setup>
	import http from "@/request/index.js"
	const qrCode = ref('');
	const money = ref('');
	const timer = ref(null);
	const status = ref('');
	const id = ref('');
	const props = defineProps({
		id: String,
		money: String
	});
	
	onMounted(() => {
		id.value = props.id;
		money.value = props.money + '元'
		pay(id.value)
		getOrderingis(id.value)
		timer.value && clearInterval(timer.value)
		timer.value = setInterval(() => {
		  getOrderingis(id.value)
		}, 15000)
	})
	
	const pay = async(id) => {
		let { code, msg, data } = await http(`/app/native/codePay`, { orderId: id },'POST')
		if (code != 200) return uni.showToast({ title: msg, icon: 'none' })
		qrCode.value = data
	}
	// 是否有正在进行中的订单
	const getOrderingis = async(id) => {
		let { code, msg, data } = await http(`/app/order/status/${id}`, 'GET')
		if (code != 200) return uni.showToast({ title: msg, icon: 'none' })
		console.log(data)
		status.value = data.orderStatus
		if (data.orderStatus == 3) {
			uni.redirectTo({
				url: `/pages/order/orderDetail?id=${id}`
			});
		}
	}
	const handlePay = async() => {
		let { code, msg, data } = await http(`/app/order/forCash/${id.value}`, 'GET')
		if (code != 200) return uni.showToast({ title: msg, icon: 'none' })
		uni.redirectTo({
			url: `/pages/order/orderDetail?id=${this.id}`
		});
	}
</script>

<style lang="scss" scoped>
	.pay {
		height: 100vh;
		background-color: #F7F7F7;
		.top {
			background: #fff;
		}
		.img-box {
			margin-top: 30px;
			.tip {
				width: 80%;
				background: #fff;
				font-size: 12px;
				margin: 0 auto;
				padding: 5px 10px;
				border-radius: 5px;
			}
			.img {
				width: 200px;
				margin: 10px auto;
			}
		}
	}
</style>
